<!-- src/main/resources/static/index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>照片处理工具</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
    <nav class="navbar">
        <div class="nav-brand">
            <h1>📸🎬 照片处理工具</h1>
        </div>
        <ul class="nav-menu">
            <li class="nav-item">
                <a href="#" class="nav-link active" onclick="switchTool('organizer')">照片整理</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link" onclick="switchTool('rating')">照片筛选</a>
            </li>
        </ul>
    </nav>

    <div class="header">
        <p class="subtitle">综合性的照片和视频处理工具集 - 扫描、统计、分类整理</p>
    </div>

    <div class="main-content">
        <div id="organizer-tool" class="tool-section">
            <!-- 原样保留 organizer 区 -->
            ...
        </div>

        <!-- 照片筛选工具 -->
        <div id="rating-tool" class="tool-section" style="display: none;">
            <div class="card">
                <h2>照片筛选工具（基于服务器目录评分）</h2>
                <div class="input-group">
                    <label for="inputFolder">输入目录（被评分的照片目录）：</label>
                    <input
                            type="text"
                            id="inputFolder"
                            placeholder="例如: /Users/devin/Pictures"
                            value="/Users/devin/Pictures/canon/小区"
                    >
                    <button class="btn btn-secondary" onclick="browseFolderRating()" title="选择文件夹">📁 浏览</button>
                    <button class="btn btn-secondary" onclick="showHelpDialog()" title="如何获取路径？" style="background: #5a6268;">❓ 帮助</button>
                </div>

                <div class="input-group">
                    <label for="miniScore">最低分数 (0.0 - 10.0)：</label>
                    <input id="miniScore" type="number" step="0.1" min="0" max="10" value="7.0">
                </div>

                <div class="input-group">
                    <label for="outputFolder">导出目录（高分图片保存到此）：</label>
                    <input
                            type="text"
                            id="outputFolder"
                            placeholder="例如: /Users/devin/Pictures/best"
                    >
                    <button class="btn btn-secondary" onclick="browseTargetFolder()" title="选择导出文件夹">📁 浏览</button>
                </div>

                <div class="button-group">
                    <button class="btn btn-primary" onclick="scanAndRatePhotos()">
                        <span class="icon">⭐</span> 扫描并评分
                    </button>
                    <button class="btn btn-success" onclick="uploadAndRatePhotos()" id="upload-rate-btn">
                        <span class="icon">📤</span> 服务器目录评分并导出
                    </button>
                </div>
            </div>

            <div class="card" id="rating-result-card" style="display: none;">
                <h2>评分结果</h2>
                <div id="rating-results"></div>
            </div>
        </div>

        <div class="loading" id="loading" style="display: none;">
            <div class="spinner"></div>
            <p>正在处理中...</p>
        </div>

        <div class="alert alert-error" id="error" style="display: none;">
            <span class="icon">⚠️</span>
            <span id="error-message"></span>
        </div>

        <div class="alert alert-success" id="success" style="display: none;">
            <span class="icon">✅</span>
            <span id="success-message"></span>
        </div>
    </div>

    <div class="footer">
        <p>支持格式：JPG, PNG, CR3, RAW, NEF, ARW, MP4, MOV, AVI, MKV 等</p>
        <p>© 2024 Photo Processing Tool</p>
    </div>
</div>

<script src="app.js"></script>
<script>
    // 简单实现与后端 /api/rate/upload-and-rate 的交互
    function uploadAndRatePhotos() {
        const inputFolder = document.getElementById('inputFolder').value.trim();
        const outputFolder = document.getElementById('outputFolder').value.trim();
        const miniScore = document.getElementById('miniScore').value;

        if (!inputFolder) {
            showError('请输入输入目录');
            return;
        }
        if (!outputFolder) {
            showError('请输入导出目录');
            return;
        }

        const formData = new FormData();
        formData.append('inputFolder', inputFolder);
        formData.append('outputFolder', outputFolder);
        formData.append('miniScore', miniScore);

        showLoading(true);
        fetch('/api/rate/upload-and-rate', {
            method: 'POST',
            body: formData
        })
        .then(async res => {
            showLoading(false);
            if (!res.ok) {
                const body = await res.json().catch(() => ({}));
                throw new Error(body.message || '请求失败');
            }
            return res.json();
        })
        .then(data => {
            if (data && data.success !== false) {
                showSuccess('服务器已开始评分处理（请查看服务器日志或目标目录）。');
            } else {
                showError(data.message || '处理失败');
            }
        })
        .catch(err => {
            showLoading(false);
            showError(err.message || '请求异常');
        });
    }

    function showLoading(visible) {
        document.getElementById('loading').style.display = visible ? 'block' : 'none';
    }
    function showError(msg) {
        const el = document.getElementById('error');
        document.getElementById('error-message').innerText = msg;
        el.style.display = 'block';
        setTimeout(() => el.style.display = 'none', 5000);
    }
    function showSuccess(msg) {
        const el = document.getElementById('success');
        document.getElementById('success-message').innerText = msg;
        el.style.display = 'block';
        setTimeout(() => el.style.display = 'none', 5000);
    }
</script>
</body>
</html>
